<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import { getDisasterByYear, getDisaster, lookAlarm, lookAlarmDocUrl2, selectFloatageForecastingInPfw } from '../../network/net.js'
import { formatTime, addHours } from "../../utils/cTime.js"
import { activeMenu } from '../../stores/chun.js' // , bmInfo
import iconWaveNo from '../../assets/img/wave-no.png'
import iconFbcNo from '../../assets/img/fbc-no.png'
import iconGantan from '../../assets/img/感叹号.png'
import iconWaveLan from '../../assets/img/wave_lan_simple.png'
import iconWaveHuang from '../../assets/img/wave_huang_simple.png'
import iconWaveHong from '../../assets/img/wave_hong_simple.png'
import iconWaveCheng from '../../assets/img/wave_cheng_simple.png'
import iconWaveInfo from '../../assets/img/wave_info_simple.png'
import iconStormLan from '../../assets/img/fbc_lan_simple.png'
import iconStormHuang from '../../assets/img/fbc_huang_simple.png'
import iconStormHong from '../../assets/img/fbc_hong_simple.png'
import iconStormCheng from '../../assets/img/fbc_cheng_simple.png'
import iconStormInfo from '../../assets/img/fbc_info_simple.png'
import iconClose from '../../assets/img/关闭.png';
import { bmName } from '@/stores/chun.js';
import ComPdfW from "../../components/ComPdfW.vue";
import { getFloatageAlarmInPfw } from '@/network/net.js'

const PDF_URL = import.meta.env.VITE_backurl_floaturl;

let token = sessionStorage.getItem('token')

// const docurl = import.meta.env.VITE_backurl_warndoc;

onMounted(() => {
    gethomePfwAlarm()
})


const homePfwAlarm = ref([])
const alarmYears = ref([])
const alarmYear = ref(new Date().getFullYear())
const activeTab = ref('漂浮物预报')
const currentAlarm = ref([])
const hisAlarms = reactive({
    '海浪警报': [
        {
            date: '2023-06-11 10:28',
            value: '海浪蓝色警报'
        },
        {
            date: '2023-06-11 10:28',
            value: '海浪黄色警报'
        },
        {
            date: '2023-06-11 10:28',
            value: '海浪橙色警报'
        }
    ],
    '风暴潮警报': [
        {
            date: '2023-06-11 10:28',
            value: '风暴潮蓝色警报'
        },
        {
            date: '2023-06-11 10:28',
            value: '风暴潮黄色警报'
        },
        {
            date: '2023-06-11 10:28',
            value: '风暴潮红色警报'
        },
    ]
})

let year = new Date().getFullYear()
for (let i = 0; i < 5; i++) {
    alarmYears.value.push({
        value: year - i,
        label: year - i + '年'
    })
}

const gethomePfwAlarm = () => {
    homePfwAlarm.value = []
    let departId = bmInfo.value.find((item) => item.name == bm.value).id;
    // let types = ['一般灾害级别', '重大灾害级别']
    // types.forEach(leveltype => {
    let leveltype = ""
    let state = 1
    getFloatageAlarmInPfw(token, departId, leveltype, state).then(res => {
        let dd = res.data.data.sort((a, b) => {
            return new Date(b.publishDate) - new Date(a.publishDate)
        })

        dd = dd.filter(item => {
            return item.level == '一般灾害级别' || item.level == '重大灾害级别'
        }
        )

        if (res.data.code != 500) {
            if (dd.length > 0) {
                homePfwAlarm.value.push({
                    date: formatTime(dd[0].publishDate),
                    value: (type == 'wave' ? '海浪' : '风暴潮') + dd[0].warnName,
                    url: dd[0].warnUrl
                })
            }
        }
    })
    // })
    // homePfwAlarm.value.push({
    //     level: '重大灾害级别'
    // })
}


const getAlarmData = () => {
    currentAlarm.value = []
    let type = activeTab.value == '漂浮物' ? 'wave' : 'storm'
    getDisaster(token, type).then(res => {
        currentAlarm.value = res.data.data?.map(item => {
            return {
                date: formatTime(item.publishDate),
                value: (activeTab.value == '海浪警报' ? '海浪' : '风暴潮') + item.warnName,
                // url: 'https://xxs.dhybzx.org:3000/qsxcx/floating/' + item.warnUrl
                url: PDF_URL + item.warnUrl
            }
        })
    })
}

const getChDate1 = (date) => {
    let dateArr = date.split(' ')[0].split('-')
    let hour = date.split(' ')[1].split(':')[0]
    return `${dateArr[1]}月${dateArr[2]}日 ${hour}时`
}

const getAlarmColor = (value) => {
    return '#000000'
    // return '#7ED321'
    // if (value.includes('蓝色')) {
    //     return '#4A90E2'
    // } else if (value.includes('黄色')) {
    //     return '#8F8839'
    // } else if (value.includes('橙色')) {
    //     return '#F5A623'
    // } else if (value.includes('红色')) {
    //     return '#D0021B'
    // } else {
    // 绿色
    // return '#7ED321'
    // }
}

const getAlarmImg = (value) => {
    if (value.includes('海浪')) {
        if (value.includes('蓝色')) {
            return iconWaveLan
        } else if (value.includes('黄色')) {
            return iconWaveHuang
        } else if (value.includes('橙色')) {
            return iconWaveCheng
        } else if (value.includes('红色')) {
            return iconWaveHong
        } else {
            return iconWaveInfo
        }
    } else {
        if (value.includes('蓝色')) {
            return iconStormLan
        } else if (value.includes('黄色')) {
            return iconStormHuang
        } else if (value.includes('橙色')) {
            return iconStormCheng
        } else if (value.includes('红色')) {
            return iconStormHong
        } else {
            return iconStormInfo
        }
    }
}

let bm = sessionStorage.getItem("bm");
bm = ref(bm);

let bmInfo = sessionStorage.getItem("bmInfo");
bmInfo = ref(JSON.parse(bmInfo));

watch([alarmYear, activeTab, bmName], () => {
    // let bmId = bmInfo.value.find((item) => item.name == bmName.value)?.id;
    let departId = bmInfo.value.find((item) => item.name == bm.value).id;
    console.log('漂浮物模块中的部门ID: ', bmInfo);
    // let type = activeTab.value == '海浪警报' ? 'wave' : 'storm'
    hisAlarms[activeTab.value] = []
    // getDisasterByYear(token, type, alarmYear.value, bmId).then(res => {
    selectFloatageForecastingInPfw(token, departId, alarmYear.value, 1).then(res => {

        // res = {
        //     data: {
        //         "code": 200,
        //         "msg": "查询数据成功",
        //         "data": [
        //             {
        //                 "id": 1,
        //                 "publishDate": "2024-12-03 00:00:00",
        //                 "url": "qshd\\秦山核电海域藻类及漂浮物监测预警-日报20241203（第300期）.pdf",
        //                 "state": 1,
        //                 "parentDirectory": "qshd",
        //                 "filename": "秦山核电海域藻类及漂浮物监测预警-日报20241203（第300期）.doc"
        //             }
        //         ]
        //     }
        // }

        res.data.data?.forEach(item => {
            // let str = '';
            // if (item.warnName == '解除') {
            //     str = '通报'
            // } else if (item.warnName == '消息') {
            //     str = ''
            // } else {
            //     str = '警报'
            // }
            hisAlarms[activeTab.value].push({
                date: formatTime(item.publishDate).split(':')[0],
                value: item.filename.split('-')[0] + '日报',
                // url :`/${item.parentDirectory}/${item.warnUrl}`
                url: PDF_URL + item.url
                // '/' + item.parentDirectory + '/' +
            })
        })
    })
    getAlarmData()

}, {
    immediate: true
})

const pdfDialog = ref(false)
let urlObj = {}

const lookAlarmDo = (item) => {
    console.log('item.url: ', item.url);
    let url = item.url
    url = url.replace('\\', '/').replace(/\.doc?$/, '.pdf');
    let radom = Math.random();
    url = url + '?p=' + radom
    lookAlarmDocUrl2(url).then(res => {

        if (res.status == 200) {
            urlObj = res.data
            pdfDialog.value = true
        }
    }).catch(err => {
        console.log(err)
    })
}

</script>

<template>
    <div class="jbpop" :class="activeMenu?.title == '漂浮物预报' ? 'jbHis' : 'jbWu'">
        <!-- 漂浮物列表 -->
        <template v-if="activeMenu?.title == '漂浮物预报'">
            <div id="jbpop_info">
                <img :src="iconClose" alt="" style="position: absolute;right: 10px;top: 10px;height: 15px;"
                    @click="activeMenu = ''">
                <div
                    style="display: flex;height: 46px;background-color: #006FFA85;border-radius: 18px 18px 18px 18px;align-items: center;justify-content: space-around;margin: 12px 12px;width: calc(100% - 24px);transition: all 0.3s;overflow: hidden;">
                    <!-- backgroundColor: activeTab == item ? '#006FFA' : '' , color: activeTab == item ? '#FFFFFF' : '' -->
                    <!-- :style="{  }" -->
                    <div class="zhai_t" v-for="item in ['漂浮物']" @click="activeTab = item" style="color: #FFFFFF;">
                        <!-- {{ item }} -->
                        漂浮物预报
                        <!-- <img v-if="homeAlarm.filter(v => v.value.includes((item == '海浪警报' ? '海浪' : '风暴潮'))).length > 0"
                            :src="iconGantan" alt="" style="position: absolute;right: 15px;height: 15px;"> -->
                    </div>
                </div>
                <template v-if="currentAlarm.length == 0">
                    <!-- <div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
                        <img class="zhai_no_img" :src="activeTab == '漂浮物' ? iconWaveNo : iconFbcNo" alt="">
                        <div class="zhai_no_txt">24小时内暂无漂浮物警报</div>
                    </div> -->
                </template>
                <template v-else>
                    <div class="zhai_his">
                        <!-- <div style="display: flex;align-items: center;justify-content: space-around;width: 100%;">
                            <div style="font-family: 'aliph500';font-size: 18px;">当前警报</div>
                        </div> -->


                        <el-scrollbar height="200px">
                            <div v-for="item in currentAlarm" class="his_item">
                                <div class="his_time">{{ item.date }}</div>
                                <div class="his_value" :style="{ color: getAlarmColor(item.value) }">{{ item.value }}
                                </div>
                                <a :href="item.url" target="_blank">查看</a>
                            </div>
                        </el-scrollbar>
                    </div>
                </template>


                <div class="zhai_his">
                    <div style="display: flex;align-items: center;justify-content: space-around;width: 100%;">
                        <div style="font-family: 'aliph500';font-size: 18px;">选择年份：</div>
                        <el-select v-model="alarmYear" placeholder="请选择" size="" style="width: 105px">
                            <el-option v-for="item in alarmYears" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>

                    <template v-if="hisAlarms[activeTab].length > 0">
                        <el-scrollbar>
                            <div v-for="item in hisAlarms[activeTab]" class="his_item">
                                <div class="his_time">{{ getChDate1(item.date) }}</div>
                                <div class="his_value" :style="{ color: getAlarmColor(item.value) }">{{ item.value }}
                                </div>
                                <el-button type="primary" size="small" @click="lookAlarmDo(item)">查看</el-button>

                            </div>
                        </el-scrollbar>
                    </template>
                    <template v-else>
                        <div class="zhai_no_txt" style="margin-top: 50px;">本年度无警报</div>
                    </template>

                </div>
            </div>
        </template>
        <!-- 无警报 -->
        <template v-else>
            <div class="jb_home_item pfw-alarm-logo" v-for="item in homePfwAlarm" v-if="homePfwAlarm.length > 0">
                <!-- <img :src="getAlarmImg(item.value)" alt=""> -->
                <div class=""
                    style="background-color:#31a948;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);height: 60px;display: flex;align-items: center;justify-content: space-around;font-family: 'yy400';opacity: 0.9;color: aliceblue;">
                    <img src="../../assets/img/alarm.png" alt="" style="height: 30px;">
                    漂浮物预警
                </div>
            </div>
            <!-- <div v-else>
                <div
                    style="background-color: #6097FA;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);height: 60px;display: flex;align-items: center;justify-content: space-around;font-family: 'yy400';opacity: 0.9;color: aliceblue;">
                    <img src="../../assets/img/alarm.png" alt="" style="height: 30px;">
                    24小时内无漂浮物警报
                </div>
            </div> -->
        </template>
    </div>

    <div v-if="pdfDialog" id="pdfDia">
        <img :src="iconClose" alt="" srcset="" @click="pdfDialog = false" />
        <ComPdfW v-if="pdfDialog" :urlObj="urlObj" style="height: 80vh" />
    </div>
</template>

<style lang="less" scoped>
.jbpop {
    position: fixed;
    top: 25px;
    left: 10px;
    width: 210px;
    height: 60px;
    // background: #E4E4E4;
    font-family: 'aliph500';
    font-size: 20px;
    color: #000000;
    z-index: 999;
    letter-spacing: 2px;
    border-radius: 10px;
    transition: all 0.3s;
    // 阴影
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    user-select: none;
}

.jb_home_item {
    img {
        height: 60px;
    }
}

// .jbWu {
//     // display: flex;
//     // justify-content: center;
//     // align-items: center;
// }

.jbHis {
    width: 400px;
    height: 80vh;
    z-index: 1999;

    #jbpop_info {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        // overflow: hidden;
        background: #E4E4E4;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding-top: 20px;
        background: #EEF2F7;

        .zhai_t {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-family: 'aliph500';
            cursor: pointer;
            position: relative;
            // overflow: hidden;
            transition: all 0.3s;
        }

        .zhai_no_img {
            width: 200px;
            height: 200px;
            // margin-top: 20px;
            margin-bottom: 10px;
        }

        .zhai_no_txt {
            font-size: 24px;
            color: #666;
            opacity: .7;
            letter-spacing: 4px;
            font-family: 'aliph500';
            width: calc(100% - 24px);
            text-align: center;
            padding-bottom: 10px;
            height: 30px;
        }

        .zhai_his {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            // justify-content: space-between;
            // flex: 1;
            height: 66.6vh;
            background: #FFFFFF;

            :deep(.el-scrollbar) {
                width: 100%;
                height: 100%;
                background: #FFFFFF;

                .el-scrollbar__wrap {
                    height: 100% !important;
                }
            }

            .his_item {
                width: calc(100% - 24px);
                padding: 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #E4E4E4;

                .his_time {
                    font-size: 14px;
                    font-family: 'aliph400';
                    color: #666;
                }

                .his_value {
                    font-size: 14px;
                    font-family: 'aliph400';
                    color: #666;
                }

                a {
                    font-size: 14px;
                    font-family: 'aliph400';
                    color: #666;
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }

    }
}

#pdfDia {
    z-index: 9999;
    position: fixed;
    left: 25%;
    top: 10vh;
    width: 50%;
    padding-top: 30px;
    background-color: #ffffff;
    height: 80vh;

    img {
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 999;
        height: 20px;
    }
}

.pfw-alarm-logo {
    top: 75px;

}
</style>
